<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="学生认证" ref="navbar"></fa-navbar>










		<!-- 如果是已经认证的进行显示 -->
		<view class="cert">




			<u-image width="100%" src="https://yd.jndyh.com/uploads/20240329/3ef2b5ace4041ca50b0c18ea07a364b4.png"
				mode="widthFix"></u-image>

			<!-- 有学生信息 -->
			<block v-if="student">

				<!-- 通过认证 -->
				<u-image v-if="student.status=='normal'" width="100%" src="https://yd.jndyh.com/assets/img/success.svg"
					mode="widthFix"></u-image>
				<view v-if="student.status=='normal'" class="u-p-30 u-border-bottom u-text-center">
					学生：【{{student.name}}】认证成功</view>

				<!-- 正在审核中 -->
				<u-image v-if="student.status=='hidden'" width="100%" src="https://yd.jndyh.com/assets/img/info.svg"
					mode="widthFix"></u-image>
				<view v-if="student.status=='hidden'" class="u-p-30 u-border-bottom u-text-center">请耐心等待，正在审核中</view>
				<!-- 拒绝了 -->
				<u-image v-if="student.status=='rejected'" width="100%" src="https://yd.jndyh.com/assets/img/error.svg"
					mode="widthFix"></u-image>
				<view v-if="student.status=='rejected'" class="u-p-30 u-border-bottom u-text-center">审核不通过</view>
				<!-- 重新认证，这里执行一次删除，然后刷新页面 -->
				<u-button v-if="student.status=='rejected'" @click="delStu">重新认证</u-button>


			</block>


			<!-- 开始认证 -->

			<block v-if="!student">
				<u-tabs :list="list" :is-scroll="false" :current="form.current" @change="change"></u-tabs>






				<!-- 学生认证 -->
				<u-form :model="form" ref="uForm">
					<block v-if="!form.current">

						<u-form-item label="教务账号" prop="usercode" label-width="150">
							<u-input v-model="form.usercode" placeholder="请填写你的教务系统账号" />
						</u-form-item>

						<u-form-item label="教务密码" prop="password" label-width="150">
							<u-input v-model="form.password" placeholder="请填写你的教务系统密码" />
						</u-form-item>
						<u-form-item label="验证码" prop="captcha" label-width="150" :right-icon="captchaImg">
							<u-input v-model="form.captcha" placeholder="请填写验证码" />

							<u-image width="16%" :src="captchaImg" mode="widthFix" @click="initCert"></u-image>
						</u-form-item>

						<view class="u-p-30 u-border-bottom u-text-center">特别说明：通过登录贵校教务系统进行认证。</view>
						<view class="u-p-30 u-border-bottom u-text-center">教务系统：http://jw.fareast-edu.net</view>


					</block>

					<block v-if="form.current">

						<u-form-item label="学生姓名" prop="name" label-width="150">
							<u-input v-model="form.name" placeholder="请填写你的姓名" />
						</u-form-item>
						<u-form-item label="身份证号" prop="idcard" label-width="150">
							<u-input v-model="form.idcard" placeholder="请填写你的身份证号" />
						</u-form-item>
					</block>





				</u-form>

				<u-button @click="submit">学生认证</u-button>





			</block>





		</view>




		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	export default {
		onLoad: async function(option) {
			// 获取
			this.initCert()

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			if (!this.student) {
				this.$refs.uForm.setRules(this.rules);
			}

		},
		onShow() {

		},
		data() {
			return {
				list: [{
					name: '老生【有教务系统学号】'
				}, {
					name: '新生【无教务系统学号】'
				}],
				captchaImg: '',
				student: {},

				form: {
					name: '',
					idcard: '',
					usercode: '2003500102',
					password: 'Cjp12345',
					captcha: '',
					cookie: '',
					current: 0
				},
				rules: {
					name: [{
						required: false,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {

							return this.$u.test.chinese(value)
						},
						message: '请输入汉字',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],

					idcard: [{
							required: false,
							message: '请输入身份证号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						}, {
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {

								return this.$u.test.idCard(value)
							},
							message: '请输入正确的身份证号',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}



					]
				}


			};
		},
		methods: {
			async initCert() {
				let res = await this.$api.getCert();
				let data = res.data

				this.student = (typeof(data.status) !== 'undefined') ? data : null
				this.captchaImg = (typeof(data.captcha) !== 'undefined') ? 'data:image/png;base64,' + data.captcha : ''
				this.form.cookie = (typeof(data.cookie) !== 'undefined') ? data.cookie : ''
			},
			change(index) {
				this.form.current = index;
			},

			copyKeyword() {
				let that = this
				uni.setClipboardData({
					data: that.keyword,
					success: function() {
						that.$u.toast('复制成功！');
						return;
					}
				});
			},
			delStu() {
				this.$api.delStu().then(res => {})
				this.initCert()
			},
			submit() {
				let that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {

						this.$api.postCert(this.form).then(res => {
							console.log(res);
							if (!res.code) {
								this.$u.toast(res.msg);
								return;
							}

							if (res.code == 1) {
								// 认证成功 370911199604295616
								// this.is_show = false
								this.$u.toast(res.msg);
								that.initCert()
								return;

							}

						});

						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				this.initCert()
			}
		}

	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.cert {
		padding: 30rpx;
	}
</style>